<template>
  <view>
    <!-- 评个分吧 -->
    <form>
      <view class="rate-star">
        <view>点击星星评分</view>
        <u-rate
          :count="starCount"
          v-model="foodScore"
          active-color="#ffac2b"
          inactive-color="#e1e1e1"
          inactive-icon="star-fill"
          size="64"
          class="select-rate-star"
          maxlength="-1"
        ></u-rate>
      </view>
      <!-- 留个言吧 -->
      <view class="leave-a-message">
        <textarea
          selectable
          placeholder-style="color:#ccc"
          placeholder="写几句评论吧..."
          :maxlength="-1"
          v-model="commentContent"
        />
      </view>
      <u-button
        class="sure-button"
        @click="submitForm({ foodScore, commentContent, foodId })"
        >确定</u-button
      >
    </form>

  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      starCount: 5,
      foodScore: 0,
      commentObj: {},
      commentContent: "",
      foodId: 0,
      userId: 0,
    };
  },
  methods: {
    ...mapActions("moduleReview", ["submitForm"]),
  },
  onLoad(e) {
    this.foodId = e.foodId;
  },
  computed: {
    ...mapState("moduleCommon", ["hostname", "urlImg", "comment"]),
  },
};
</script>

<style lang="scss" scoped>
uni-textarea {
  width: 100%;
  height: 188px;
}
// 写点评论
.leave-a-message {
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 20rpx;
  margin: 0 20rpx;
  height: 400rpx;
}
::v-deep .u-label {
  flex: 0 !important;
}
.rate-star {
  margin-bottom: 40rpx;
  margin-top: 40rpx;
  color: #ccc;
  text-align: center;
  // 选择星星个数
  .select-rate-star {
    margin-top: 20rpx;
  }
}

// 确定按钮
.sure-button {
  margin-top: 20rpx;
  background-color: #ffac2b;
  width: 700rpx;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
}
</style>
